import React from 'react'
import './index.css'
import MusicNav from './MusicNav'
import img from '../../logo.png'
import {
  StarOutlined,
  FolderFilled,
  VideoCameraOutlined,
  WifiOutlined,
  HeartOutlined,
  DownloadOutlined,
  FieldTimeOutlined,
  UnorderedListOutlined
} from '@ant-design/icons'
export default function NavLeft() {
  return (
    <div id='nav_left'>
      <img src={img}></img>
      <MusicNav title="在线音乐" detail={[
        {id:'01',name:'推荐',path:'/recommend',icon:<StarOutlined/>},
        {id:'02',name:'音乐馆',path:'/',icon:<FolderFilled />},
        {id:'03',name:'视频',path:'/video',icon:<VideoCameraOutlined />},
        {id:'04',name:'电台',path:'/',icon:<WifiOutlined />}
      ]}/>
      <MusicNav title="我的音乐" detail={[
          {id:'05',name:'我喜欢',path:'/like',icon:<HeartOutlined />},
          {id:'06',name:'本地和下载',path:'/download',icon:<DownloadOutlined />},
          {id:'07',name:'最近播放',path:'/',icon:<FieldTimeOutlined />},
          {id:'08',name:'试听列表',path:'/',icon:<UnorderedListOutlined />}
      ]}/>
    </div>
  )
}
